
$directionBase: .06666666666666667rem;
$directions: () !default;
$directions: (
  "top": "t",
  "right": "r",
  "bottom": "b",
  "left": "l"
);

$sizes: () !default;
$sizes: (
  "xss": 0,
  "xs": 1,
  "sm": 2,
  "md": 3,
  "lg": 4
);


@each $direction, $value in $directions {
  @for $i from 0 through 5 {
    .m#{$value}-#{$i} { margin-#{$direction}: $i * $directionBase !important; }
    .p#{$value}-#{$i} { padding-#{$direction}: $i * $directionBase !important; }
  }
}

@for $i from 0 through 5 {
  .mx-#{$i} { margin-left: $i * $directionBase !important; margin-right: $i * $directionBase !important; }
  .px-#{$i} { padding-left: $i * $directionBase !important; padding-right: $i * $directionBase !important; }
}
@for $i from 0 through 5 {
  .my-#{$i} { margin-top: $i * $directionBase !important; margin-bottom: $i * $directionBase !important; }
  .py-#{$i} { padding-top: $i * $directionBase !important; padding-bottom: $i * $directionBase !important; }
}

@each $size, $value in $sizes {
  .font-#{$size} { font-size: #{10 + $value * 2}px !important;}
  .text-#{$size} { font-size: #{10 + $value * 2}px !important; line-height: 2; }
}

@function rem($size) {
  @return $size / 75 + rem;
}

@mixin iphonx {
  @media (device-width: 375px) and (device-height: 812px) {
    @content;
  }
}